<template>
  <div class="bg">
    <div class="dynamic">
      <div class="header">
        <div class="avatar">
          <el-avatar :src="dynamic.publisherAvatar" :size="50"></el-avatar>
        </div>
        <div class="info-text">
          <div class="nickname">{{ dynamic.publisherName }}</div>
          <div class="datetime">{{ dynamic.createTime }}
            &nbsp;·&nbsp;
            <span v-if="dynamic.forwardType === 9">投稿了视频</span>
          </div>
          <!--        <div class="datetime">2025年4月23日 14：55</div>-->
        </div>
      </div>
      <div class="center">
        <div class="title">{{dynamic.contentTitle}}</div>
        <!--不是转发-->
        <div class="content" v-if="dynamic.forwardType === 0">
          <div class="content-text">{{dynamic.contentText}}</div>
          <div class="content-img" style="margin-top: 15px" v-if="dynamic.contentImg">
            <img style="margin-right: 10px" v-for="item in dynamic.contentImg" :src="item" alt="" width="120">
          </div>
        </div>

        <!--转发视频-->
        <div class="content" v-if="dynamic.forwardType === 1 || dynamic.forwardType === 3">
          <div class="content-text">{{dynamic.contentText || dynamic.forwardDesc}}</div>
          <ForwardVideoContent width="580" :data="dynamic.forwardVideoVO" :forward-type="1" v-if="dynamic.forwardType === 1"></ForwardVideoContent>
          <ForwardVideoContent width="580" :data="dynamic.forwardVideoVO" :forward-type="3" v-else></ForwardVideoContent>
        </div>

        <!--转发动态-->
        <div class="content" v-if="dynamic.forwardType === 2">
          <div class="content-text">{{dynamic.contentText}}</div>
          <ForwardDynamicContent :width="580" :data="dynamic.forwardDynamicVO"></ForwardDynamicContent>
        </div>
      </div>
      <div class="footer">
        <el-tabs v-model="activeName"  class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane  :label="'评论'+dynamic.commentCount" name="comment">
            <comment-list :dynamic-id="currentDynamicId" :input-width="520"></comment-list>
          </el-tab-pane>
          <el-tab-pane :label="'赞与转发'+(dynamic.likeCount+dynamic.forwardCount)" name="user">
            <div>
              <div class="like-or-forward" v-for="item in likeAndForwardList" :key="item.id">
                <div class="user-info">
                  <div class="avatar">
                    <el-avatar :src="item.userAvatar" :size="50"></el-avatar>
                  </div>
                  <div class="text">
                    <div class="nickname">{{ item.nickname }}</div>

                    <div class="action">{{ item.actionType === 1 ? '赞了': item.actionType === 2 ? '转发了':'' }}</div>
                  </div>
                </div>

                <el-button type="primary" v-if="item.userId !== userId && item.hasCare === 1">已关注</el-button>
                <el-button type="primary" v-if="item.userId !== userId && item.hasCare === 2">关注</el-button>

              </div>
              <el-divider></el-divider>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import CommentList from "@/components/CommentList.vue";
import {useRoute} from "vue-router";
import {getDynamicById, getLikeAndforwardList} from "@/api/api.js";
import ForwardVideoContent from "@/components/ForwardVideoContent.vue";
import ForwardDynamicContent from "@/components/ForwardDynamicContent.vue";

const activeName = ref('comment')
const handleClick = (tab, event) => {
  console.log(tab, event)
}


const route = useRoute();

const currentDynamicId = ref()

const userId = ref(Number(localStorage.getItem("userId")))
const dynamic = ref({
  dynamicId:0,
  contentTitle:'',
  contentText:'',
  contentImg:'',

  publisherId:'',
  publisherName:'',
  publisherAvatar:'',

  likeCount:0,
  forwardCount:0,
  commentCount:0,
  forwardType:0,
  forwardVideoVO:null,
  forwardDynamicVO:null,
  createTime:''
})

const likeAndForwardList = ref([])


currentDynamicId.value = Number(route.params.dynamicId)
onMounted(async ()=>{

  // 根据id获取动态详情
  const res = await getDynamicById(currentDynamicId.value)
  console.log(res)
  if(res.data.contentImg !== null){
    res.data.contentImg = res.data.contentImg.split(',')
    res.data.contentImg.pop()
  }
  if(res.data.forwardDynamicVO && res.data.forwardDynamicVO.contentImg !== null){
    res.data.forwardDynamicVO.contentImg = res.data.forwardDynamicVO.contentImg.split(',')
    res.data.forwardDynamicVO.contentImg.pop()
  }
  console.log(res.data)
  dynamic.value = res.data


  // 根据id获取动态评论



  // 根据id过去动态的赞与转发
  const res1 = await getLikeAndforwardList(currentDynamicId.value);
  console.log(res1)
  likeAndForwardList.value = res1.data
  let virtualId = 1
  likeAndForwardList.value.forEach(ele=>{
    ele.id = virtualId++
  })
})

</script>
<style lang="scss" scoped>
.bg{
  height: 650px;
  overflow-y: auto;
  background:url("/banner06.webp");
  .dynamic{
    box-sizing: border-box;
    padding: 20px;
    width: 700px;
    min-height: 650px;
    background-color: #ffffff;
    margin: 0 auto;
    .header{
      height: 50px;
      display: flex;
      .avatar{
        height: 50px;
        width: 70px;
      }
      .info-text{
        .nickname{
          cursor: pointer;
          height: 30px;
          line-height: 30px;
          color: deeppink;
          font-size: 20px;
        }
        .datetime{
          height: 20px;
          line-height: 20px;
          color: var(--gray-font-color--);
          font-size: 13px;
        }
      }
    }
    .center{
      box-sizing: border-box;
      padding-left:70px;
      min-height: 50px;
    }
    .footer{
      .like-or-forward{
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user-info{
          display: flex;
          align-items: center;
          .avatar{
            margin-right: 15px;
          }
          .text{
            font-size: 14px;
            display: flex;
            align-items: center;
            .nickname{
              margin-right: 6px;
            }
          }
        }
      }
    }
  }
}




.footer > :deep(el-tabs__item) {
  color:red;
}
.el-tabs__item{
  font-size: 50px;
}
:deep(.el-tabs--top>.el-tabs__header .el-tabs__item){
  font-size: 25px;
  color: var(--gray-font-color--);
}
:deep(.el-tabs--top>.el-tabs__header .el-tabs__item:hover){
  color: var(--subject-color--);
}
.el-tabs{
  --el-tabs-header-height: 50px;

}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>